@import '../../style/_variables.less';

.mooli-bcaptcha {
  width: 280px;

  &.mooli-popup {
    background-color: transparent;
  }

  &--container {
    padding: 20px 16px 24px;
    background: #ffffff;
    border-radius: 10px;
  }

  &--header {
    margin-bottom: 16px;

    >h3 {
      text-align: center;
      font-size: 16px;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      color: #333333;
    }

    >p {
      margin: 8px 0 16px;
      font-size: 14px;
      font-family: Roboto-Regular, Roboto;
      font-weight: 400;
      color: #666666;
    }
  }

  &--body {}

  &--close {
    display: block;
    width: 32px;
    height: 32px;
    margin: 32px auto 0;
    background: url('') center center no-repeat;
    background-size: 100% auto;
  }

  &--result {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    text-align: center;

    &--icon {
      display: inline-block;
      width: 40px;
      height: 40px;
    }

    &--descript {
      margin: 8px 0 0;
      font-size: 16px;
      font-family: Roboto-Regular, Roboto;
      font-weight: 400;
    }

    &--success {
      .mooli-bcaptcha--result--icon {
        background: url('') center center no-repeat;
        background-size: 100% auto;
      }

      .mooli-bcaptcha--result--descript {
        color: #57aa00;
      }
    }

    &--timeout,
    &--fail {
      .mooli-bcaptcha--result--icon {
        background: url('') center center no-repeat;
        background-size: 100% auto;
      }

      .mooli-bcaptcha--result--descript {
        color: #eb3223;
      }
    }
  }

  &--frequency {
    overflow: hidden;
    width: 248px;
    padding: 24px 16px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;

    >h2 {
      margin: 24px 0 0;
      font-size: 16px;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      color: #333333;
    }

    >p {
      margin: 6px 0 24px;
      font-size: 14px;
      font-family: Roboto-Regular, Roboto;
      font-weight: 400;
      color: #666666;
    }
  }

  &--frequency-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: url('') center center no-repeat;
    background-size: 100% auto;
  }

  &--frequency-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #fed000;
    border-radius: 22px;
    font-size: 16px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #333333;
  }

  .mooli-captcha--panel {
    overflow: hidden;
    padding-bottom: 0;
    border-radius: 10px;
  }

  .mooli-captcha--panel--placeholder {
    height: 143px;
    padding-top: 0;
  }

  .mooli-captcha--panel--bg-slider {
    display: flex;
    overflow: hidden;
    background-color: #f5f5f5;
  }
}
